<script setup lang="ts">
defineOptions({
  name: "deviceStatisticsTasksItem"
});
import { markRaw } from "vue";
import { useRouter } from "vue-router";
import safetyHazardTasks from "@/assets/svg/common/safetyHazardTasks.svg?component";
import callInWorkOrder from "@/assets/svg/common/callInWorkOrder.svg?component";
import pmTasks from "@/assets/svg/common/pmTasks.svg?component";
import inspectionTasks from "@/assets/svg/common/inspectionTasks.svg?component";
import maintenanceTasks from "@/assets/svg/common/maintenanceTasks.svg?component";

const router = useRouter();

const iconComList = {
  safetyHazardTasks: markRaw(safetyHazardTasks),
  callInWorkOrder: markRaw(callInWorkOrder),
  pmTasks: markRaw(pmTasks),
  inspectionTasks: markRaw(inspectionTasks),
  maintenanceTasks: markRaw(maintenanceTasks)
};

interface Props {
  data?: any;
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), { dark: false });

const valueIsEmpty = value => {
  if (value === "" || value == null || typeof value == "undefined") {
    return true;
  }
  return false;
};

const toPageHandler = (flag?: boolean) => {
  let { path = "", query_done = {}, query = {} } = props.data;
  if (!path) return;
  if (!flag) {
    query = { ...query, ...query_done };
  }
  router.push({ path, query });
};
</script>

<template>
  <div class="tasks-item-content">
    <component :is="iconComList[data?.icon]" class="content-icon color-total" />
    <div class="content-box">
      <div class="content-box-label" :class="{ dark }">{{ data?.label }}</div>
      <div class="content-box-data" :class="{ dark }">
        <px-tooltip effect="dark" content="已完成">
          <div :class="['data-text', 'color-done', data?.path ? 'data-hover' : '']" @click="toPageHandler(false)">
            {{ valueIsEmpty(data?.done) ? "--" : data?.done }}
          </div>
        </px-tooltip>
        /
        <px-tooltip effect="dark" content="合计任务数">
          <div :class="['data-text', 'color-total', data?.path ? 'data-hover' : '']" @click="toPageHandler(true)">
            {{ valueIsEmpty(data?.total) ? "--" : data?.total }}
          </div>
        </px-tooltip>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// $colorDone: #28d892ff;
$colorDone: #19d08d; //#34d399;
$darkColorDone: #04ff9d;
$colorTotal: var(--px-color-primary);

.tasks-item-content {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;

  .dark {
    &.content-box-label {
      color: #fff !important;
    }

    .color-done {
      color: $darkColorDone !important;
    }
  }

  .color-done {
    color: $colorDone;
  }

  .color-total {
    color: $colorTotal;
  }

  .content-icon {
    height: 40px;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .content-box-label {
      font-weight: 600;
      line-height: 1;
      color: #555;
      white-space: nowrap;
    }

    .content-box-data {
      display: flex;
      gap: 6px;
      align-items: center;
      font-size: 22px;
      font-weight: 600;
      line-height: 30px;
      color: #555;
      white-space: nowrap;

      .data-text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-width: 26px;
        height: 30px;
      }

      .data-hover:hover {
        font-size: 24px;
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }
}
</style>
